<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加报修</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" type="text/css" href="/public/SUI/themes/css/sm.min.css"/>
    <link rel="stylesheet" type="text/css" href="/public/SUI/themes/css/sm-extend.min.css"/>

    <link rel="stylesheet" type="text/css" href="/public/SUI/themes/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/public/SUI/themes/css/style.css"/>

    <link rel="stylesheet" type="text/css" href="/public/SUI/themes/default/core.css"/>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    #{if jsSignature != null}
        <script type="text/javascript">
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: '${jsAppId}', // 必填，公众号的唯一标识
                timestamp: '${jsSignature?.timestamp}', // 必填，生成签名的时间戳
                nonceStr: '${jsSignature?.nonceStr}', // 必填，生成签名的随机串
                signature: '${jsSignature?.signature}',// 必填，签名，见附录1
                jsApiList: [ #{list items:jsApis, as:'jsapiName'} '${jsapiName}'${jsapiName_isLast ? '' : ',' } #{/list} ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        </script>
    #{/if}

</head>
<body>
<div class="page-group">
    <div class="page">
        <header class="bar bar-nav">
            <a href="javascript:history.go(-1);" class="icon icon-left pull-left back"></a>
        #{if issueType.toString() == 'REPAIR'}
            <h1 class="title">添加报修</h1>
        #{/if}
        #{else }
            <h1 class="title">添加公共区域报修</h1>
        #{/else}
        </header>
        <section class="addRepair content scroll_y">
            <div class="list-block">
                <form name="form1" method="post" action="">
                    <input type="hidden" id="issueName" placeholder="报修标题">
                    <ul>
                        <!-- Text inputs -->
                    #{if issueType.toString() == 'REPAIR'}
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">单元号</div>-->
                                    <div class="item-input">
                                        <select id="roomId">
                                            <option value="">请选择房间</option>
                                            #{list contractRoomList , as :'contractroom'}
                                                <option value="${contractroom?.room?.id}">${contractroom?.room?.building?.campus?.name +':'+contractroom?.room?.building?.name+"-"+contractroom?.room?.roomNumber}</option>
                                            #{/list}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                    #{/if}
                    #{else }
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">单元号</div>-->
                                    <div class="item-input">
                                        <select id="campusId">
                                            #{if campuses.size() == 1}
                                                <option value="${campuses.get(0)?.id}">${campuses.get(0)?.name}</option>
                                            #{/if}
                                            #{else }
                                                <option value="">请选择小区</option>
                                                #{list campuses , as :'campus'}
                                                    <option value="${campus?.id}">${campus?.name}</option>
                                                #{/list}
                                            #{/else}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                    #{/else}
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">单元号</div>-->
                                    <div class="item-input">
                                        <select id="issuesubtype">
                                            <option value="">请选择报修类型</option>
                                        #{list issueSubTypes , as :'issuesubtype'}
                                            <option value="${issuesubtype}">&{'issuesubtype.' + issuesubtype}</option>
                                        #{/list}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                    #{if issueType.toString() == 'REPAIR'}
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">上门日期</div>-->
                                    <div class="item-input">
                                        <input type="text" id="visit-date" data-toggle='date' placeHolder="请选择上门日期"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">上门时段</div>-->
                                    <div class="item-input">
                                        <input type="text" id="visit-picker" placeHolder="请选择上门时段"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                    #{/if}
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">手机号</div>-->
                                    <div class="item-input">
                                        <input type="text" id="phone" placeholder="输入联系手机" value="${phone}">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <!--<div class="item-title label">报修描述</div>-->
                                    <div class="item-input">
                                        <textarea id="remark" placeholder="描述报修内容"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="content-block uploadPic">
                        <h3>上传照片(1-5张)</h3>
                        <input type="file" accept="image/*" id="cameraInput" name="cameraInput" style="display:none;"/>
                        <input type="file" accept="image/*" id="cameraInput_andriod" name="cameraInput_andriod"
                               style="display:none;"/>
                        <ul>
                            <li id="addli" class="add create-actions"><img src="/public/images/icon_add.gif"></li>
                        </ul>
                    </div>
                    <div class="content-block">
                        <input type="button" name="button" class="button button-fill sub_btn button-big button-orange"
                               id="button" value="提交报修">
                    </div>

                </form>
            </div>

        </section>

        <script type='text/javascript' src='/public/SUI/js/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='/public/SUI/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='/public/SUI/js/sm-extend.min.js' charset='utf-8'></script>


        <script type='text/javascript' src="/public/js/lrz.all.bundle.js"></script>
        <script type='text/javascript' src="/public/js/order.js"></script>

        <script type="text/javascript">
            $(function () {
                var issueType = '${issueType}';
                $("#visit-picker").picker({
                    toolbarTemplate: '<header class="bar bar-nav">\
                <button class="button button-link pull-right close-picker">确定</button>\
                <h1 class="title">请选择上门时间段</h1>\
                </header>',
                    cols: [
                        {
                            textAlign: 'center',
                            values: ['09:00  - ', '10:00  - ', '11:00  - ', '12:00  - ', '13:00  - ', '14:00  - ', '15:00  - ', '16:00  - ', '17:00  - ']
                        },
                        {
                            textAlign: 'center',
                            values: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
                        }
                    ]
                });
                $(document).on('click', '.sub_btn', function () {
                    var imgList = [];

                    var issueName = $('#issueName').val();
                    var issueType = '${issueType}';
                    var roomId = '';
                    var campusId = '';
                    var visitStart = "";
                    var visitEnd = "";
                    if (issueType == 'REPAIR') {
                        roomId = $('#roomId').val();
                        if ((roomId == null || roomId == undefined || roomId == '' || roomId == '请选择房间')) {
                            $.toast('请选择房间');
                            return;
                        }

                        var visitDate = $("#visit-date").val();
                        if (visitDate == "") {
                            $.toast('请选择上门日期!');
                            return;
                        }

                        var visitTime = $("#visit-picker").val();
                        if (visitTime == "") {
                            $.toast('请选择上门时间段!');
                            return;
                        }

                        var start_ = visitTime.split("  -  ")[0];
                        var end_ = visitTime.split("  -  ")[1];
                        visitStart = visitDate + " " + start_ + ":00";
                        visitEnd = visitDate + " " + end_ + ":00";

                        if (start_ >= end_) {
                            $.toast('时间段开始时间必须小于结束时间');
                            return;
                        }
                    }
                    if (issueType == 'COMPLAINT') {
                        campusId = $('#campusId').val();
                    }
                    var phone = $('#phone').val();
                    if (phone == null || phone == '' || phone == undefined) {
                        $.toast('手机号不能为空');
                        return;
                    }

                    var telRe = /^(1)\d{10}$/;
                    if (!telRe.test(phone)) {
                        $.toast("手机号格式不正确");
                        return false;
                    }

                    var remark = $('#remark').val();

                    var issuesubtype = $('#issuesubtype').val();
                    if (issuesubtype == null || issuesubtype == undefined || issuesubtype == '' || issuesubtype == '请选择报修类型') {
                        $.toast("请选择报修类型");
                        return;
                    }

                    $(".imgs").each(function (i) {
                        if (i == $(".imgs").length - 1) {
                            return;
                        }
                        if ($(this).val() != undefined && $(this).val() != "") {
                            imgList.push($(this).val());
                        }
                    });
                    $.showPreloader();
                    $.getJSON("/issue/repair", {
                                issueType: issueType,
                                issuesubtype: issuesubtype,
                                roomId: roomId,
                                campusId:campusId,
                                issueName: issueName,
                                phone: phone,
                                remark: remark,
                                imgList: imgList,
                                visitStart: visitStart,
                                visitEnd: visitEnd
                            },
                            function (data) {
                                $.hidePreloader();
                                if (data.success) {
                                    $.router.back();
                                } else {
                                    $.toast(data.msg);
                                }
                            }
                    )
                })

                $('#issuesubtype,#roomId,#campusId').change(function () {
                    if (issueType == 'COMPLAINT') {
                        var campus = $('#campusId').find("option").not(function () {
                            return !this.selected
                        }).text();
                        var issuesubtype = $('#issuesubtype').find("option").not(function () {
                            return !this.selected
                        }).text();
                        var issueNmae = '';
                        if (issuesubtype == null || issuesubtype == undefined || issuesubtype == '' || issuesubtype == '请选择报修类型') {
                            return;
                        }
                        if (campus == null || campus == undefined || campus == '' || campus == '请选择小区') {
                            return;
                        }
                        issueNmae = '报修小区：' + campus +',报修类型：' + issuesubtype;
                        $('#issueName').val(issueNmae);
                    } else {
                        var issuesubtype = $('#issuesubtype').find("option").not(function () {
                            return !this.selected
                        }).text();
                        var room = $('#roomId').find("option").not(function () {
                            return !this.selected
                        }).text();
                        if (issuesubtype == null || issuesubtype == undefined || issuesubtype == '' || issuesubtype == '请选择报修类型') {
                            return;
                        }
                        if (room == null || room == undefined || room == '' || room == '请选择房间') {
                            return;
                        }
                        var issueNmae = '报修房间：' + room + ' ,报修类型：' + issuesubtype;
                        $('#issueName').val(issueNmae);
                    }
                })


//        $(".lunbo").swiper({
//            autoplay: 3000  //可选选项，自动滑动
//        });

//        // 检测高度
//
//        $(".content").on("scroll",function(){
//            if($('.content').scrollTop() > 100){
//                $('.bar-nav0').addClass("active");
//            }else {
//                $('.bar-nav0').removeClass("active");
//            }
//        });


            })
        </script>
    </div>
</div>
<div id="img_tmp" style="display: none;">
    <li class="img"><a href="#"><i class="iconfont">&#xe61c;</i></a><img src="" id="img_src"/><input type="hidden" class="imgs" id="img_src_hidden"
                                                                                              value="imgSrc"/></li>
</div>


#{include 'weixin/footer.html'/}
</body>
</html>
